<template>
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import VectorTileLayer from 'ol/layer/VectorTile';
    import VectorTileSource from 'ol/source/VectorTile';
    import MVT from 'ol/format/MVT';
    import View from 'ol/View';

    export default {
        name: "CanvasTileLayer",
        data() {
            return {};
        },
        mounted() {

            let vectorTileLayer = new VectorTileLayer({
                source: new VectorTileSource({
                    format: new MVT(),
                    url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
                }),
            });
            //初始化地图
            this.map = new Map({
                target: "map", //指定挂载dom，注意必须是id
                layers: [
                    vectorTileLayer
                ],
                //配置视图
                view: new View({
                    center: [0, 0],
                    zoom: 0,
                }),
            });

            let renderer = this.map.createRenderer();
            console.log(renderer)
            console.log(this.map)
            console.log(this.map.getLayers())

            vectorTileLayer.on("postrender",(event)=>{
                console.log(event);
            })

        },
        methods: {}
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>